<template>
	<view style="background-color: #d2f8df;margin-top: 180rpx;height: 1400rpx;"
		v-if="!(user===null||user===''||user.status===2||user.status==='2')">
		<u-navbar title="发布圈子" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="side">
			<view style="font-weight: 600;height: 70rpx;display: flex;align-items: center;">
				<u--text prefixIcon="file-text" iconStyle="font-size: 20px;font-weight: 600;" size="20"
					text="内容"></u--text>
			</view>
			<u-line></u-line>
			<view style="padding-bottom: 20rpx;">
				<u--textarea v-model="param.content" placeholder="请输入内容" border="none"></u--textarea>
				<view style="margin-left: 10rpx;">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9"></u-upload>
				</view>
			</view>
		</view>

		<view class="side">
			<view style="font-weight: 600;height: 70rpx;display: flex;align-items: center;">
				<u--text prefixIcon="file-text" iconStyle="font-size: 20px;font-weight: 600;" size="20"
					text="圈子类型"></u--text>
			</view>
			<u-line></u-line>
			<view style="height: 200rpx;width: 100%;">
				<view class="existing_label">
					<view class="u-page__tag-item" v-for="(item, index2) in allTags" :key="index2">
						<u-tag shape="circle" :text="item.name" @click="TagClick(item.id)" type="error"
							v-if="index===item.id">
						</u-tag>
						<u-tag shape="circle" :text="item.name" @click="TagClick(item.id)" type="error" plain
							v-if="index!==item.id">
						</u-tag>
					</view>
				</view>
			</view>
		</view>

		<view class="side" v-if="index===3">
			<view style="font-weight: 600;height: 70rpx;display: flex;align-items: center;">
				<u--text prefixIcon="file-text" iconStyle="font-size: 20px;font-weight: 600;" size="20"
					text="信息补充"></u--text>
			</view>
			<u-line></u-line>
			<view style="height: 420rpx;width: 100%;">
				<view style="margin-left: 50rpx;">
					<!-- 时间 地点 联系方式 -->
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="类型" prop="userInfo.name" borderBottom ref="item1">
							<picker :range="list" @change="zhaolingTypeChange">
								<u-button>{{zhaolingName ===''?'打开':zhaolingName}}</u-button>
								<!-- {{zhaolingName ===''?'打开':zhaolingName}} -->
							</picker>
						</u-form-item>
						<u-form-item label="时间" prop="userInfo.name" borderBottom ref="item1">
							<u-datetime-picker :show="show" v-model="startTime" mode="datetime" @close="show=false"
								@confirm="confirm()" @cancel="show=false"></u-datetime-picker>
							<u-button @click="show = true">{{param.findTime===''?'打开':param.findTime}}</u-button>
						</u-form-item>
						<u-form-item label="地点" prop="userInfo.name" borderBottom ref="item1">
							<u--input v-model="param.address" border="none" placeholder="请输入地址"></u--input>
						</u-form-item>
						<u-form-item label="Tel" prop="userInfo.name" borderBottom ref="item1">
							<u--input v-model="param.tel" border="none" placeholder="请输入联系方式"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>

		<view class="side" v-if="index===5">
			<view style="font-weight: 600;height: 70rpx;display: flex;align-items: center;">
				<u--text prefixIcon="file-text" iconStyle="font-size: 20px;font-weight: 600;" size="20"
					text="信息补充"></u--text>
			</view>
			<u-line></u-line>
			<view style="height: 470rpx;width: 100%;">
				<view style="margin-left: 50rpx;">
					<!-- 价格 类型 新旧成都 联系方式 -->
					<u-form-item label="出价" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="param.price" border="none" placeholder="请输入卖的价格"></u--input>
					</u-form-item>
					<u-form-item label="原价" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="param.souprice" border="none" placeholder="请输入原始"></u--input>
					</u-form-item>
					<u-form-item label="类型" prop="userInfo.name" borderBottom ref="item1">
						<picker :range="twoheadtypeList" range-key="name" @change="changePcikerVal">
							<u-button>{{param.twoheadType===''?'打开':twoTypeName.name}}</u-button>
							<!-- {{param.twoheadType===''?'打开':twoTypeName.name}} -->
						</picker>
					</u-form-item>
					<u-form-item label="成色" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="param.news" border="none" placeholder="请输入1到10成数字"></u--input>
					</u-form-item>
					<u-form-item label="Tel" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="param.tel" border="none" placeholder="请输入联系方式"></u--input>
					</u-form-item>
				</view>
			</view>
		</view>

		<view class="side">
			<view style="font-weight: 600;height: 70rpx;display: flex;align-items: center;">
				<u--text prefixIcon="file-text" iconStyle="font-size: 20px;font-weight: 600;" size="20"
					text="置顶"></u--text>
				<u-switch v-model="switchvalue" @change="change"></u-switch>
			</view>
			<u-line></u-line>
			<view style="height: 450rpx;width: 100%;display: flex;justify-content: center;" v-if="switchvalue">
				<video src="http://39.98.162.10:9000/test/video1.mp4" @ended="videoEnded" ref="video" controls></video>
			</view>
		</view>



		<view class="side">
			<view style="margin-top: 80rpx;">
				<u-button type="primary" text="确定" @click="submint()"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				switchvalue: false,
				zhaolingName: '',
				twoTypeName: '',
				list: [
					"失物招领",
					"寻物启事"
				],
				twoheadtypeList: [],
				param: {
					urls: [],
					userPicUrl: '',
					userId: '',
					userName: '',
					content: "",
					top: '',
					pushAble: 1,
					type: '1',
					twoheadType: '',
					price: '',
					news: "",
					tel: '',
					zhaolingType: '',
					address: '',
					souprice: '',
					top: 0
				},
				user: '',
				startTime: Number(new Date()),
				show: false,
				index: 1,
				allTags: [{
						id: 1,
						name: "表白脱单",
					},
					{
						id: 2,
						name: "校友闲聊",
					},
					{
						id: 3,
						name: "招领寻物",
					},
					{
						id: 4,
						name: "游戏搭子",
					},
					{
						id: 5,
						name: "二手市场",
					},
					{
						id: 6,
						name: "新生墙",
					},
					{
						id: 7,
						name: "兼职发布",
					}, {
						id: 8,
						name: "考研交流",
					},
				]
			}
		},
		methods: {
			videoEnded(event) {
				this.param.top = 1
				uni.showToast({
					title: "置顶成功",
					icon: "none"
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				var that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.$baseurl + '/minio/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
								console.log(res.data)
								this.param.urls.push(res.data)
							}, 1000)
						}
					});
				})
			},
			async submint() {
				var user = uni.getStorageSync("loginUser")
				this.param.userId = user.id
				this.param.userName = user.userName
				this.param.userPic = user.userPic
				if (this.param.content === "") {
					uni.showToast({
						title: "内容不能为空",
						icon: 'none'
					})
					return;
				}
				if (this.param.type === 3) {
					if (this.param.tel === '' || this.param.zhaolingType === '' || this.param.address === '' || this
						.param.findTime === "") {
						uni.showToast({
							title: "请将内容填写完整",
							icon: 'none'
						})
						return;
					}
				}
				if (this.param.type === 5) {
					if (this.param.twoheadType === '' || this.param.price === '' || this.param.tel === '') {
						uni.showToast({
							title: "请将内容填写完整",
							icon: 'none'
						})
						return;
					}
				}
				const res = await this.$myRuquest({
					url: '/font/loveAdd',
					data: this.param,
					method: 'post'
				})
				// if(res.data.data)
				if (res.data.code === 200) {
                    uni.switchTab({
                    	url:"/pages/index/index"
                    })
					uni.showToast({
						title: "发布成功，等待管理员审核",
						icon: "none"
					})
				} else {
					uni.showToast({
						title: "系统错误，联系管理员",
						icon: "none"
					})
				}
			},
			change(e) {
				this.switchvalue = e
				console.log('change', e);
			},
			zhaolingTypeChange(e) {
				this.param.zhaolingType = e.detail.value
				this.zhaolingName = this.list[e.detail.value]
				console.log(this.zhaolingName)
			},
			changePcikerVal(e) {
				this.param.twoheadType = e.detail.value;
				this.twoTypeName = this.twoheadtypeList[e.detail.value]
			},
			async getType() {
				const res = await this.$myRuquest({
					url: '/font/getTwoHeadType'
				})
				this.twoheadtypeList = res.data.rows
			},
			confirm(e) {
				this.param.findTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.show = false
			},
			TagClick(index) {
				this.index = index
				this.param.content = ""
				this.param.twoheadType = ''
				this.param.price = '',
					this.param.news = ""
				this.param.zhaolingType = ""
				this.param.address = ""
				this.param.tel = ""
				this.param.type = index
				this.param.top = 0
			}
		},
		onLoad() {
			this.getType()
			this.user = uni.getStorageSync("loginUser")
		}
	}
</script>

<style lang="scss" scoped>
	.side {
		margin-left: 10rpx;
		margin-right: 10rpx;
		background-color: #ffffff;
		margin-bottom: 10px;
		/* 		margin: auto; */
		margin-top: 10rpx;
		border-radius: 10px;
	}

	.existing_label {
		height: 150rpx;
		width: 100%;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: space-between;
		flex-wrap: wrap;

		.u-page__tag-item {
			margin-top: 15px;
			margin-right: 10px;
		}





	}
</style>